<?xml version="1.0" encoding="UTF-8" ?>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:t="http://myfaces.apache.org/tomahawk">

<h:body>
	<ui:composition template="../../templates/general.xhtml">
		<ui:define name="content">

			<f:metadata>
				<f:viewParam id="grupo_id" name="id" value="#{grupoCrudBean.id}" />
				<f:viewParam id="mode" name="mode" value="#{grupoCrudBean.mode}" />
			</f:metadata>

			<f:event type="preRenderView" listener="#{grupoCrudBean.init}" />

			<h1 class="page-header">
				<i class="fa fa-users fa-3"></i> Grupo
			</h1>

			<p:growl id="messages" showDetail="true" autoUpdate="true" />

			<h:panelGrid>
				<p:panel styleClass="jumbotron" style="width:1024px;">

					<h:panelGrid columns="2" columnClasses="first">
						<h:outputLabel for="ano" value="Ano Lectivo:"
							style="font-size: 0.9em;" />
						<p:inputText id="ano" value="#{grupoCrudBean.grupo.anoLectivo.descricao}"
							disabled="true"
							style="font-size: 0.9em;" />
					</h:panelGrid>

					<h:panelGrid columns="4" columnClasses="first">
						<h:outputLabel for="numero" value="Número:"
							style="font-size: 0.9em;" />
						<p:inputText id="numero" value="#{grupoCrudBean.grupo.numero}"
							required="true" disabled="#{grupoCrudBean.disableComponent}"
							style="font-size: 0.9em;" />
					</h:panelGrid>

				</p:panel>

				<h3 class="page-header">
					<i class="fa fa-user"></i> Alunos
				</h3>

				<p:column colspan="4" rendered="#{!grupoCrudBean.disableComponent}">
					<center>
						<h:panelGrid id="addAlunoGrid" columns="3" columnClasses="first"
							style="margin-bottom:20px;"
							rendered="#{!grupoCrudBean.disableComponent}">
							<h:outputLabel value="Escolha um aluno: " for="addAluno"
								rendered="#{!grupoCrudBean.disableComponent}"
								style="font-size: 0.9em;" />
							<p:autoComplete value="#{grupoCrudBean.alunoSeleccionado}"
								id="addAluno" completeMethod="#{grupoCrudBean.completeAluno}"
								style="font-size: 0.9em;" var="a" itemLabel="#{a.numero}"
								itemValue="#{a}" converter="#{alunoConverter}"
								forceSelection="true"
								rendered="#{!grupoCrudBean.disableComponent}">
								<p:column>
                    				#{a.numero} - #{a.nome}
                				</p:column>
							</p:autoComplete>
							<p:commandButton value="Adicionar" update="dataTableAlunos"
								action="#{grupoCrudBean.adicionarAluno}"
								style="margin-left: 10px; font-size: 0.9em;"
								process="addAlunoGrid" />
						</h:panelGrid>
					</center>
				</p:column>
				<p:column colspan="4">
					<p:dataTable id="dataTableAlunos" var="aluno"
						value="#{grupoCrudBean.alunos}">

						<f:facet name="header">  
            						Lista de Alunos do grupo
        						</f:facet>

						<p:column style="font-size: 0.9em;">
							<f:facet name="header">  
                						Número 
            						</f:facet>
							<h:outputText value="#{aluno.numero}" />
						</p:column>

						<p:column style="font-size: 0.9em;">
							<f:facet name="header">  
                						Grupo 
            						</f:facet>
							<h:outputText value="#{aluno.grupo.numero}" />
						</p:column>

						<p:column style="font-size: 0.9em;">
							<f:facet name="header">  
                						Email 
            						</f:facet>
							<h:outputText value="#{aluno.email}" />
						</p:column>

						<p:column rendered="#{!grupoCrudBean.disableComponent}">
							<p:commandButton icon="ui-icon-info"
								action="#{grupoCrudBean.visualizarAluno(aluno)}"
								title="Visualizar aluno" ajax="false" style="font-size: 0.9em;" />
						</p:column>

						<p:column>
							<p:commandButton icon="ui-icon-trash"
								title="Eliminar aluno do grupo" style="font-size: 0.9em;"
								actionListener="#{grupoCrudBean.eliminarAluno(aluno)}"
								update="dataTableAlunos"
								rendered="#{!grupoCrudBean.disableComponent}">
								<p:confirm header="Confirmação"
									message="Tem a certeza que pretende eliminar este aluno do grupo?"
									icon="ui-icon-alert" />
							</p:commandButton>
						</p:column>
					</p:dataTable>
					<p:confirmDialog global="true" showEffect="fade" hideEffect="fade"
						style="font-size: 0.9em;">
						<p:commandButton value="Sim" type="button"
							styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
							style="font-size: 0.9em;" />
						<p:commandButton value="Não" type="button"
							styleClass="ui-confirmdialog-no" icon="ui-icon-close"
							style="font-size: 0.9em;" />
					</p:confirmDialog>
				</p:column>
			</h:panelGrid>
			<h3 class="page-header"></h3>

			<p:commandButton id="editar" value="Editar"
				action="#{grupoCrudBean.editar}" ajax="false"
				rendered="#{grupoCrudBean.renderBotaoEditar}"
				style="margin-right: 10px; margin-bottom: 50px; float:right; font-size: 0.9em;" />
			<p:commandButton id="voltar" value="Voltar"
				action="#{grupoCrudBean.voltar}" ajax="false"
				rendered="#{grupoCrudBean.renderBotaoVoltar}"
				style="margin-right: 10px; margin-bottom: 50px; float:right; font-size: 0.9em;" />
			<p:commandButton id="eliminar" value="Eliminar"
				action="#{grupoCrudBean.apagar}" ajax="false"
				rendered="#{grupoCrudBean.renderBotaoApagar}"
				style="margin-right: 10px; margin-bottom: 50px; float:right; font-size: 0.9em;" />
			<p:commandButton id="gravar" value="Gravar"
				action="#{grupoCrudBean.gravar}" ajax="false"
				rendered="#{grupoCrudBean.renderBotaoGravar}"
				style="margin-right: 10px; margin-bottom: 50px; float:right; font-size: 0.9em;" />
		</ui:define>
	</ui:composition>
</h:body>
</html>
